<template>
	<view class="page-content" :style="{'--main-color-1':configInfo.mainColor,'--main-color-2':configInfo.mainColor1}">
		<u-sticky customNavHeight="0">
			<view class="section-bg flex-between p-l-xs p-r-md">
				<u-tabs
					:list="sortList" 
					:activeStyle="{color:'#3f2a17',fontSize:'28rpx'}"
					:inactiveStyle="{fontSize:'26rpx'}"
					lineColor="#f2bc35"
					@change="tabChange"
				>
				</u-tabs>
				<view class="text-sm flex-center" @click="changeCate">
					<text>{{cateText}}</text>
					<i-icon name="arrow-down-s-line"></i-icon>
				</view>
			</view>
			<view class="rel notice-bar flex-between" style="overflow: hidden;align-items: center;" v-if="configInfo.task_roll_open == 1">
				<u-notice-bar class="m-l-xs" direction="column" icon="" :text="taskTrends" duration="3000"></u-notice-bar>
			</view>
		</u-sticky>
		
		<!-- 切换分类 -->
		<u-picker 
			:show="catePickerShow" 
			:columns="catePickerColumns" 
			keyName="name" 
			:closeOnClickOverlay="true" 
			@cancel="catePickerShow = false"
			@confirm="changeCateConfirm"
			@close="catePickerShow = false"
		>
		</u-picker>
		
		<m-loading :show="listLoad" :emptyShow="list.data.length <= 0"></m-loading>
		<m-tasks :list="list.data" v-if="!listLoad"></m-tasks>
		<uni-load-more :status="status" :content-text="contentText" v-if="showLoading"></uni-load-more>
		<!-- 占位视图 -->
		<view class="edgeInsetBottom"></view>
		
		<!-- 侧边小工具 -->
		<side-tools :scrollTop="scrollTop" :backShow="false">
			<template v-slot:items>
				<view class="side-tools_item"@click="$util.go('my/my_receive',{login:true})">
					<m-icon name="flag-line" size="38rpx"></m-icon>
				</view>
			</template>
		</side-tools>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	export default {
		data() {
			return {
				listLoad:true,
				status:"loading",
				showLoading:false,
				scrollTop:0,
				pageLoading:true,
				cateOn:0,
				endTimeData:{},
				showTopList:false,
				sortList:[{
					name: this.$t('task-list.tabbar-1'),
					sort: 	'rand'
				},{
					name: this.$t('task-list.tabbar-2'),
					sort: 	'read_count'
				},{
					name: this.$t('task-list.tabbar-3'),
					sort: 	'id'
				},{
					name: this.$t('task-list.tabbar-4'),
					sort: 	'unit_price'
				}],
				catePickerShow: false,
				catePickerColumns: [],
				cateText: this.$t('task-list.cate-title'),
				offsetTop:0
			}
		},
		
		computed: mapState({
			userInfo: state => state.user.userInfo,
			configInfo: state => state.config.configInfo,
			cateList: state => state.task.cateList,
			catTab: state =>  uni.getStorageSync('taskCatTab') ||  state.task.catTab,
			param: state => state.task.taskParam,  
			list: state => state.task.taskList,
			contentText: state => state.content.contentText,
			// cateId:  state => state.task.taskCateId,
			taskTrends:  state => state.task.taskTrends,
		}),
		
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		
		onLoad(){
			// if(this.$wechat.isWechat()){
			// 	this.$util.navTitle()
			// 	this.offsetTop = '-45px'
			// }
			this.initTask()
			this.getTaskTrends()
		},
		onReady(){
			
		},
		onShow(){

		},
		onHide(){
			this.$util.hideAll()
		},
		
		async onPullDownRefresh(){
			await this.initTask(1);
			this.$util.showToast(this.$t('app.renovate.success'),function(){
				uni.stopPullDownRefresh();
			});
		},
		
		async onReachBottom(){
			if (this.list.current_page >= this.list.last_page || this.ListLoad){
				this.status="nomore";
				return
			};
			this.status = "loading";
			this.showLoading = true;
			this.getList(this.param.page + 1);		
		},
		
		methods: {
			...mapActions(['getTaskCate','getTaskList','getTopTaskList']),
			...mapMutations(['updateTaskState']),
			
			// 初始化任务大厅
			async initTask(){
				// 获取任务
				this.getList(1)
			},
			
			onChangeEndTime(e){
				this.endTimeData = e
			},
			
			// 获取任务
			async getList(page = 0){
				let param = uni.$u.deepClone(this.param)
				if (page) {
					param.page = page
					this.updateTaskState({
						key: 'taskParam',
						val: param
					})
				}
				await this.getTaskList(param)
				this.listLoad = false;
			},
			
			searchHistory:function(value){
				if(value){
					// 存在搜索值
					let page = 'search/search?key='+value;
					this.$util.go(page,{login:true});
				}
				// 搜索展示
			},
			
			async tabChange(e){
				this.listLoad = true;
				let {
					param
				} = this
				param.sort = e.sort
				this.updateTaskState({
					key: 'taskParam',
					val: param
				})
				await this.getList()
			},
			
			// 获取悬赏动态
			async getTaskTrends(){
				if(this.configInfo.task_roll_open != 1)return
				let res = await this.$api.task.getTaskTrends();
				if(res.code = 200){
					let data = res.data
					let trends = []
					data.map((item, index) => {
						trends.push(item.msg)
					})
					this.updateTaskState({
						key: 'taskTrends',
						val: trends
					})
				}
			},
			
			
			// 切换分类
			async changeCate(){
				await this.getTaskCate() // 更新任务分类
				let {
					param,
					cateList
				} = this
				cateList.splice(0,0,{'name':this.$t('task-list.cate-title'),'cid':0});
				this.catePickerColumns = [cateList]
				this.catePickerShow = true
			},
			
			// 
			async changeCateConfirm(e){
				let selected = e.value[0]
				// console.log(selected)
				let {
					param,
					cateText
				} = this
				param.category_id = selected.cid
				this.cateText = selected.name
				this.updateTaskState({
					key: 'taskParam',
					val: param
				})
				this.listLoad = true
				this.catePickerShow = false
				await this.getList()
			}
		}
	}
</script>

<style lang="scss">

	page{
		background-color: var(--theme-page-bg);
	}
	.u-tabs{
		background-color: #fff;
	}
	.u-scroll-list{
		padding-bottom:0
	}
	.status_bar{
		background-color: #fff;
	}

	/deep/ .u-scroll-list{
		&__indicator{
			// margin: 10rpx!important;
			margin-top: 0!important;
			padding: 15rpx;
		}
	}
	.notice-bar{
		background-color: rgb(253, 246, 236);
		// width:70%;
		/deep/ .u-notice-bar{
			// padding: 0;
			// background: transparent!important;
		}
		/deep/ .u-notice__swiper__item__text{
			font-size: 26rpx!important;
		}
		// /deep/ .u-notice__swiper__item{
		// 	justify-content: flex-end;
		// }
	}
	.cate-screen{
		// text-decoration: #efe7dc;
		// border-bottom: 1px solid var(--theme-text-auxiliary);
	}
	/deep/ .side-tools{
		// #ifdef APP-PLUS
		bottom: 120rpx!important;
		// #endif
		// #ifdef H5
		bottom: 130rpx;
		// #endif
	}
</style>
